<template>
  <div class="about-us">
    <TopInfo />
    <TopTabs />
    <div class="content">
      <div class="tabs-content">
        <el-tabs tab-position="left" style="height: 600px">
          <el-tab-pane label="个人中心">
            <el-row :gutter="20">
              <el-col :span="18">
                <div class="grid-content bg-purple">
                  <div class="user-info">
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <div>
                          <div class="cop-name">{{ conpName }}</div>
                          <div class="cop-photo">
                            <img :src="conpPhoto" alt="" />
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="4">
                        <div class="line">管理企业</div>
                        <div class="line2">0</div>
                        <!-- <div class="line3">24h</div> -->
                      </el-col>
                      <el-col :span="4">
                        <div class="line">申报通知</div>
                        <div class="line2">13</div>
                        <!-- <div class="line3">24h</div> -->
                      </el-col>
                      <el-col :span="4">
                        <div class="line">公示公告</div>
                        <div class="line2">20</div>
                        <!-- <div class="line3">24h</div> -->
                      </el-col>
                      <el-col :span="4">
                        <div class="line">政策法规</div>
                        <div class="line2">20</div>
                        <!-- <div class="line3">24h</div> -->
                      </el-col>
                    </el-row>
                  </div>
                  <div class="new-release">
                    <div class="info-title">
                      <span class="fl">最新发布</span>
                      <span class="fr" style="cursor: pointer" @click="ToNews()"
                        >更多</span
                      >
                    </div>
                    <ul class="matching-list">
                      <li
                        @click="ToNewsDetail(item.Id)"
                        v-for="item in newsData"
                        :key="item.Id"
                      >
                        <span class="fl">{{ item.Title }}</span>
                        <span class="fr">{{ item.SendTime }}</span>
                      </li>
                    </ul>
                  </div>
                  <!-- <div class="other-info">
                    <el-row :gutter="20">
                      <el-col :span="12"
                        ><div class="other1">
                          <div class="info-title">
                            <span class="fl">企业产业分布</span>
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="12"
                        ><div class="other1">
                          <div class="info-title">
                            <span class="fl">企业地区分布</span>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div> -->
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <div class="right-info">
                    <div class="info-title">
                      <span class="fl">推荐项目</span>
                      <span
                        class="fr"
                        @click="ToRe(4, 1)"
                        style="cursor: pointer"
                        >更多</span
                      >
                    </div>
                    <ul class="matching-list pro-list">
                      <li
                        @click="ToResourceDetail(1, item.Id)"
                        v-for="item in resourceData1"
                        :key="item.Id"
                      >
                        <span class="fl">{{ item.ProName }}</span>
                        <!-- <span class="fr">{{ item.SendTime }}</span> -->
                      </li>
                    </ul>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="我的收藏">
            <el-table
              :data="tableData"
              style="width: 100%"
              height="570"
              @row-click="clickRow"
              stripe
              size="small"
            >
              <el-table-column prop="Title" label="收藏项目名">
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    @click.stop="handleClick(scope.row)"
                    type="text"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="修改公司" style="width: 600px; margin: 0 auto">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>修改公司名</span>
              </div>
              <div>
                <el-input
                  v-model="copInput"
                  placeholder="请输入公司名"
                  style="width: 60%; margin: 20px 20%"
                ></el-input>
              </div>
              <div>
                <el-button
                  type="primary"
                  @click="ChangeCompany"
                  style="width: 60%; margin: 20px 20%"
                  >确&nbsp;&nbsp;定</el-button
                >
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="修改密码" style="width: 600px; margin: 0 auto">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>修改密码</span>
              </div>
              <div>
                <el-input
                  v-model="oldPwd"
                  placeholder="请输入原始密码"
                  style="width: 60%; margin: 20px 20%"
                  show-password
                ></el-input>
                <el-input
                  v-model="newPwd"
                  placeholder="请输入新密码"
                  style="width: 60%; margin: 20px 20%"
                  show-password
                ></el-input>
                <el-input
                  v-model="newPwd2"
                  placeholder="请确认新密码"
                  style="width: 60%; margin: 20px 20%"
                  show-password
                ></el-input>
              </div>
              <div>
                <el-button
                  type="primary"
                  @click="ChangePwd"
                  style="width: 60%; margin: 20px 20%"
                  >确&nbsp;&nbsp;定</el-button
                >
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="商协会展览馆">
            <NewList typeId="55" newTitle="商协会展览馆" />
          </el-tab-pane>
          <el-tab-pane label="研究机构展示厅">
            <NewList typeId="56" newTitle="研究机构展示厅" />
          </el-tab-pane>
          <el-tab-pane label="优秀企业家展示馆">
            <NewList typeId="57" newTitle="优秀企业家展示馆" />
          </el-tab-pane>
          <el-tab-pane label="优秀项目展示厅">
            <NewList typeId="58" newTitle="优秀项目展示厅" />
          </el-tab-pane>
          <el-tab-pane label="找场地">
            <NewList typeId="59" newTitle="找场地" />
          </el-tab-pane>
          <el-tab-pane label="找技术">
            <NewList typeId="60" newTitle="找技术" />
          </el-tab-pane>
          <el-tab-pane label="找设备">
            <NewList typeId="61" newTitle="找设备" />
          </el-tab-pane>
          <el-tab-pane label="找人才">
            <NewList typeId="62" newTitle="找人才" />
          </el-tab-pane>
          <el-tab-pane label="找服务机构">
            <NewList typeId="63" newTitle="找服务机构" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <BottomInfo />
  </div>
</template>

<script>
import BottomInfo from "../components/BottomInfo";
import TopInfo from "../components/TopInfo";
import TopTabs from "../components/TopTabs";
import NewList from "../components/NewList";
export default {
  name: "UserCenter",
  data() {
    return {
      conpName: "",
      conpPhoto: "",
      newsData: [],
      resourceData1: [],
      keywords: "",
      activeTabs: 0,
      limit: 100,
      page: 1,
      day: 0,
      typeid: 1,
      tableData: [],
      copInput: "",
      oldPwd: "",
      newPwd: "",
      newPwd2: "",
    };
  },
  mounted() {
    if (this.$cookies.get("userdata")) {
      this.conpPhoto = this.$cookies.get("userinfo").Photo;
      this.conpName = this.$cookies.get("userinfo").CompanyName;
      this.GetList();
      this.GetSaveList();
      this.GetCompany();
      this.GetResourceList();
    }
  },
  methods: {
    ToNewsDetail(id) {
      this.$router.push({ name: "NewsDetail", query: { id } });
      this.$cookies.set("TopActive", 9);
    },
    GetList() {
      this.$axios({
        url: "/Policy/GetPolicyList",
        method: "post",
        data: {
          limit: 10,
          page: 1,
          day: this.day,
          typeid: this.typeid,
          title: this.keywords,
          userdata: this.$cookies.get("userdata"),
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          //console.log(res.data.data);
          // this.count = res.data.count;
          let rows = res.data.data;
          // this.loading = false;
          // if (rows == null || rows.length === 0) {
          // 加载结束
          // this.finished = true;
          // return;
          // }
          this.newsData = this.newsData.concat(rows);
          // this.isLoading = false;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    GetSaveList() {
      this.$axios({
        url: "/User/GetUserCollectList",
        method: "post",
        data: {
          limit: this.limit,
          page: this.page,
          userdata: this.$cookies.get("userdata"),
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          // console.log(res.data.data);
          // let rows = res.data.data;
          // this.loading = false;
          this.tableData = res.data.data;
          // if (rows == null || rows.length === 0) {
          // 加载结束
          // this.finished = true;
          // return;
          // }
          // this.MyColeectionData = this.MyColeectionData.concat(rows);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClick(row) {
      // console.log(row);
      this.$axios({
        url: "/User/AddUserCollect",
        method: "post",
        data: {
          userdata: this.$cookies.get("userdata"),
          policyid: row.ProId,
          typeid: row.TypeId,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          // console.log(keys);
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].policyId == row.policyId) {
              this.tableData.splice(i, 1);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    GetCompany() {
      this.$axios({
        url: "/User/GetUserEntName",
        method: "post",
        data: {
          userdata: this.$cookies.get("userdata"),
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          // console.log(res.data.data);
          if (res.data.status == 1) {
            this.copInput = res.data.data;
          } else {
            // Toast.fail(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    GetResourceList() {
      let url = "/Resource/GetProjectList";
      this.$axios({
        url,
        method: "post",
        data: {
          limit: 10,
          page: 1,
          userdata: this.$cookies.get("userdata"),
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          //console.log(res.data.data);
          this.resourceData1 = res.data.data;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    ChangeCompany() {
      if (!this.copInput) {
        this.$message({
          message: "公司名不能为空！",
          type: "warning",
        });
      } else {
        this.$axios({
          url: "/User/UpdateCompanyName",
          method: "post",
          data: {
            userdata: this.$cookies.get("userdata"),
            entname: this.copInput,
          },
          transformRequest: [
            function (data) {
              let ret = "";
              for (let it in data) {
                ret +=
                  encodeURIComponent(it) +
                  "=" +
                  encodeURIComponent(data[it]) +
                  "&";
              }
              return ret;
            },
          ],
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
          },
        })
          .then((res) => {
            // console.log(res.data);
            // console.log(this.IsCollect);
            //   return res.data.data;
            if (res.data.status == 1) {
              this.$message({
                message: "公司名称修改成功！",
                type: "success",
              });
              // Notify({ type: "success", message: "公司名称修改成功！" });
              // setTimeout(() => {

              // }, 500);
            } else {
              // Toast.fail(res.data.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    ChangePwd() {
      if (!this.oldPwd || !this.newPwd || !this.newPwd2) {
        this.$message({
          message: "密码不能为空！",
          type: "warning",
        });
      } else if (this.newPwd !== this.newPwd2) {
        this.$message({
          message: "两次密码输入不一致！",
          type: "warning",
        });
      } else {
        this.$axios({
          url: "/User/UpdatePwdtoPC",
          method: "post",
          data: {
            userdata: this.$cookies.get("userdata"),
            oldpwd: this.oldPwd,
            newpwd: this.newPwd,
          },
          transformRequest: [
            function (data) {
              let ret = "";
              for (let it in data) {
                ret +=
                  encodeURIComponent(it) +
                  "=" +
                  encodeURIComponent(data[it]) +
                  "&";
              }
              return ret;
            },
          ],
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
          },
        })
          .then((res) => {
            // console.log(res.data);
            // console.log(this.IsCollect);
            //   return res.data.data;
            if (res.data.status == -10003) {
              this.$message({
                message: res.data.msg,
                type: "error",
              });
            } else if (res.data.status == 1) {
              this.$message({
                message: "密码修改成功！",
                type: "success",
              });
              this.oldPwd = "";
              this.newPwd = "";
              this.newPwd2 = "";
              // Notify({ type: "success", message: "公司名称修改成功！" });
              // setTimeout(() => {

              // }, 500);
            } else {
              // Toast.fail(res.data.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    ToNews() {
      this.$router.push({ name: "News" });
      this.$cookies.set("TopActive", 2);
    },
    ToResourceDetail(n, id) {
      let api = "";
      if (n == 1) {
        api = "ResourceDetailPro";
      } else if (n == 2) {
        api = "ResourceDetailPer";
      } else {
        api = "ResourceDetailFin";
      }
      this.$router.push({ name: api, params: { id } });
      this.$cookies.set("TopActive", 9);
    },
    ToRe(tabs, n) {
      if (this.active > 3 && this.active < 7) {
        this.active = tabs;
        this.$emit("func", n);
      } else {
        this.$router.push({ name: "Resource", params: { Type: n } });
        this.$cookies.set("TopActive", tabs);
      }
    },
    clickRow(row, column, event) {
      // console.log(row);
      if (row.TypeId == 1) {
        this.$router.push({
          name: "ResourceDetailPro",
          params: { id: row.ProId },
        });
      }
      if (row.TypeId == 2) {
        this.$router.push({
          name: "ResourceDetailPer",
          params: { id: row.ProId },
        });
      }
      if (row.TypeId == 3) {
        this.$router.push({
          name: "ResourceDetailFin",
          params: { id: row.ProId },
        });
      }
      if (row.TypeId == 4) {
        this.$router.push({
          name: "NewsDetail",
          query: { id: row.ProId },
        });
      }
    },
  },
  components: {
    TopInfo,
    TopTabs,
    BottomInfo,
    NewList,
  },
};
</script>

<style scoped>
.content {
  background-color: #f4f6fc;
  padding: 25px 0;
  min-height: 500px;
}
.tabs-content {
  width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
  font-size: 14px;
  min-height: 600px;
}
.user-info {
  height: 140px;
  background: #ffffff;
  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}
.new-release {
  height: 400px;
  background: #ffffff;
  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  margin-top: 20px;
}
other-info {
  height: 190px;
}
.other1 {
  height: 190px;
  background: #ffffff;
  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  margin-top: 20px;
}
.right-info {
  height: 560px;
  background: #ffffff;
  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.02);
  border-radius: 5px;
}
.cop-name {
  font-size: 16px;
  color: #333333;
  margin-bottom: 15px;
}
.cop-photo img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.user-info .line {
  font-size: 16px;
  color: #333333;
  margin-bottom: 15px;
}
.user-info .line2 {
  font-size: 32px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
}
.user-info .line3 {
}
.info-title {
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  color: #095aff;
  padding: 0 20px;
  font-size: 18px;
}
.matching-list li {
  height: 34px;
  line-height: 34px;
  padding: 0 20px;
  cursor: pointer;
}
.pro-list li .fl {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>